<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <div class="box">
        <h1>{{count}}</h1>
        <button v-on:click = "count +=1">点击加1</button>
        <!-- v-on的简写方式@ -->
        <button @click = "count -=1">点击减1</button>

        <button @click="cheng">点击*3</button>
        <button @click="chu">点击 /3</button>
        <button @click="add(5,$event)">传参</button>
        <!-- 一个元素绑定多个相同事件 -->
        <button v-on:click="cheng();chu($event)">多个相同事件</button>
        <button @click="cheng();chu($event)">多个相同事件</button>

        <!-- 一个元素上绑定多个不同的事件 -->
        <div class="box1" v-on="{click:cheng,mousemove:move}">test 多个不同事件</div>
        <!-- 该种情况不要简写 -->
        <!-- <div class="box1" @="{click:cheng,mousemove:move}">test 多个不同事件</div> -->

    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm1 = new Vue({
            el:'.box',
            data:{
                count:0
            },
            methods: {
                cheng:function(){
                    // console.log(this);
                    // 在方法中this指向当前的vue实例对象
                    this.count = this.count * 3;
                    console.log('cheng')
                },
                /* chu:function(){
                    console.log(this);
                    this.count = this.count / 3;
                } */
                chu(e){
                    // console.log(e);
                    // 触发事件的DOM对象
                    // console.log(e.target);
                    this.count = this.count / 3;
                    console.log('chu')
                },
                // 对于事件对象event ,当绑定事件时有形参，event必须通过$event传递进来，否则接收不到，没有形参，直接接收即可
                add(num,e){
                    console.log(num);
                    console.log(e);
                    this.count = this.count + 5;
                },
                move(){
                    console.log('move');
                }
            },
        })
        // 点击按钮加1



        /* 
        复习：
        {{}}  Mustache  变量 表达式
        data  必须有初始化 
        str:''
        num:0
        bealoon:true/false
        arr:[]
        obj:{}
        err:null
        
        v-text v-html v-once 
        Object.freeze()
        v-bind: :
        v-on:事件名  @事件名
        
        */
    </script>
</body>
</html>